<template>
  <div>
    <el-container>
      <SidebarMenu
        :default-active="activeMenu"
        @goToRoleManagement="goToRoleManagement"
        @goToMenuManagement="goToMenuManagement"
        @goToPermissionControl="goToPermissionControl"
        @goToSystemSetting="goToSystemSetting"
        @goToLogManagement="goToLogManagement"
        @goToFileManagement="goToFileManagement"
        @goToArticleManagement="goToArticleManagement"
        @goToUserInfoManagement="goToUserInfoManagement"
      />

      <el-container>
        <el-header>
          <el-header>
          <Navbar title="日志管理" :avatar="currentAvatar" />

        </el-header>
        </el-header>

        <el-main>
          <!-- 查询表单 -->
          <el-card class="query-card" shadow="never">
            <el-form :inline="true" :model="queryForm">
              <el-form-item label="操作人">
                <el-input v-model="queryForm.operatorName" placeholder="请输入操作人姓名" clearable @keyup.enter="searchLogs" />
              </el-form-item>
              <el-form-item label="操作类型">
                <el-select v-model="queryForm.operationType" placeholder="请选择操作类型" clearable>
                  <el-option label="登录" value="LOGIN" />
                  <el-option label="登出" value="LOGOUT" />
                  <el-option label="创建" value="CREATE" />
                  <el-option label="更新" value="UPDATE" />
                  <el-option label="删除" value="DELETE" />
                  <el-option label="查询" value="QUERY" />
                </el-select>
              </el-form-item>
              <el-form-item label="模块">
                <el-select v-model="queryForm.module" placeholder="请选择模块" clearable>
                  <el-option label="用户管理" value="USER" />
                  <el-option label="角色管理" value="ROLE" />
                  <el-option label="菜单管理" value="MENU" />
                  <el-option label="权限管理" value="PERMISSION" />
                  <el-option label="系统设置" value="SYSTEM" />
                  <el-option label="文件管理" value="FILE" />
                  <el-option label="日志管理" value="LOG" />
                  <el-option label="文章管理" value="ARTICLE" />
                  <el-option label="认证管理" value="AUTH" />
                </el-select>
              </el-form-item>
              <el-form-item label="操作结果">
                <el-select v-model="queryForm.result" placeholder="请选择操作结果" clearable>
                  <el-option label="成功" value="SUCCESS" />
                  <el-option label="失败" value="FAILURE" />
                  <el-option label="异常" value="ERROR" />
                  <el-option label="警告" value="WARNING" />
                </el-select>
              </el-form-item>
              <el-form-item label="IP地址">
                <el-input v-model="queryForm.ipAddress" placeholder="请输入IP地址" clearable @keyup.enter="searchLogs" />
              </el-form-item>
              <el-form-item label="时间范围">
                <el-date-picker
                  v-model="queryForm.timeRange"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" :loading="loading" @click="searchLogs">查询</el-button>
                <el-button @click="resetQueryForm">重置</el-button>
                <el-button type="success" @click="exportLogs">导出日志</el-button>
                <el-button type="warning" @click="cleanupLogs">清理过期日志</el-button>
              </el-form-item>
            </el-form>
            
            <!-- 快速查询按钮 -->
            <div class="quick-query-buttons">
              <el-button size="small" @click="quickQueryToday">今日日志</el-button>
              <el-button size="small" @click="quickQueryWeek">本周日志</el-button>
              <el-button size="small" @click="quickQueryMonth">本月日志</el-button>
              <el-button size="small" @click="quickQueryErrors">错误日志</el-button>
              <el-button size="small" @click="quickQueryLogins">登录日志</el-button>
            </div>
          </el-card>

          <!-- 统计信息 -->
          <el-row :gutter="20" class="statistics-row">
            <el-col :span="6">
              <el-card class="statistics-card">
                <div class="statistics-item">
                  <div class="statistics-number">{{ statistics.totalLogs }}</div>
                  <div class="statistics-label">总日志数</div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="statistics-card">
                <div class="statistics-item">
                  <div class="statistics-number">{{ statistics.todayLogs }}</div>
                  <div class="statistics-label">今日日志</div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="statistics-card">
                <div class="statistics-item">
                  <div class="statistics-number">{{ statistics.errorLogs }}</div>
                  <div class="statistics-label">错误日志</div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="statistics-card">
                <div class="statistics-item">
                  <div class="statistics-number">{{ statistics.activeUsers }}</div>
                  <div class="statistics-label">活跃用户</div>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <!-- 日志表格 -->
          <el-card class="log-table-card">
            <template #header>
              <div class="card-header">
                <span>操作日志列表</span>
                <el-button type="danger" size="small" @click="cleanupLogs">清理过期日志</el-button>
              </div>
            </template>

            <el-table :data="logs" style="width: 100%" v-loading="loading">
              <el-table-column prop="operationTime" label="操作时间" width="180">
                <template #default="scope">
                  {{ formatDateTime(scope.row.operationTime) }}
                </template>
              </el-table-column>
              <el-table-column prop="operatorName" label="操作人" width="120" />
              <el-table-column prop="operationType" label="操作类型" width="100">
                <template #default="scope">
                  <el-tag :type="getOperationTypeColor(scope.row.operationType)">
                    {{ getOperationTypeLabel(scope.row.operationType) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="module" label="模块" width="120">
                <template #default="scope">
                  <el-tag type="info">{{ getModuleLabel(scope.row.module) }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="description" label="操作描述" />
              <el-table-column prop="ipAddress" label="IP地址" width="140" />
              <el-table-column prop="result" label="结果" width="100">
                <template #default="scope">
                  <el-tag :type="scope.row.result === 'SUCCESS' ? 'success' : 'danger'">
                    {{ scope.row.result === 'SUCCESS' ? '成功' : '失败' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="executionTime" label="执行时间" width="100">
                <template #default="scope">
                  {{ scope.row.executionTime }}ms
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120" fixed="right">
                <template #default="scope">
                  <el-button type="text" size="small" @click="viewLogDetail(scope.row)">查看详情</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
              <el-pagination
                :current-page="pagination.currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </el-card>
        </el-main>
      </el-container>
    </el-container>

    <!-- 日志详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="日志详情" width="800px">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="操作时间">{{ formatDateTime(selectedLog.operationTime) }}</el-descriptions-item>
        <el-descriptions-item label="操作人">{{ selectedLog.operatorName }}</el-descriptions-item>
        <el-descriptions-item label="操作类型">{{ getOperationTypeLabel(selectedLog.operationType) }}</el-descriptions-item>
        <el-descriptions-item label="模块">{{ getModuleLabel(selectedLog.module) }}</el-descriptions-item>
        <el-descriptions-item label="IP地址">{{ selectedLog.ipAddress }}</el-descriptions-item>
        <el-descriptions-item label="执行时间">{{ selectedLog.executionTime }}ms</el-descriptions-item>
        <el-descriptions-item label="操作描述" :span="2">{{ selectedLog.description }}</el-descriptions-item>
        <el-descriptions-item label="请求URL" :span="2">{{ selectedLog.requestUrl }}</el-descriptions-item>
        <el-descriptions-item label="请求方法">{{ selectedLog.requestMethod }}</el-descriptions-item>
        <el-descriptions-item label="响应状态码">{{ selectedLog.responseStatusCode }}</el-descriptions-item>
        <el-descriptions-item label="请求参数" :span="2">
          <pre>{{ formatJson(selectedLog.requestParams) }}</pre>
        </el-descriptions-item>
        <el-descriptions-item label="错误信息" :span="2" v-if="selectedLog.errorMessage">
          <el-alert :title="selectedLog.errorMessage" type="error" show-icon />
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import SidebarMenu from './SidebarMenu.vue';
import Navbar from './CommonNavbar.vue';
import api from '../utils/request.js';

const router = useRouter();
const activeMenu = ref('3-2'); // 日志管理菜单项
const loading = ref(false);
const detailDialogVisible = ref(false);
const selectedLog = ref({});

// 查询表单
const queryForm = ref({
  operatorName: '',
  operationType: '',
  module: '',
  timeRange: [],
  result: '', // 新增：操作结果
  ipAddress: '' // 新增：IP地址
});

// 分页
const pagination = ref({
  currentPage: 1,
  pageSize: 20,
  total: 0
});

// 统计信息
const statistics = ref({
  totalLogs: 0,
  todayLogs: 0,
  errorLogs: 0,
  activeUsers: 0
});

// 日志数据
const logs = ref([]);

// 获取日志列表
const fetchLogs = async (useCache = false) => {
  try {
    loading.value = true;
    
    // 构建查询参数
    const params = {
      page: pagination.value.currentPage,
      pageSize: pagination.value.pageSize
    };
    
    // 添加查询条件 - 修复参数名称映射
    if (queryForm.value.operatorName?.trim()) {
      params.operatorName = queryForm.value.operatorName.trim();
    }
    
    if (queryForm.value.operationType) {
      params.operationType = queryForm.value.operationType;
    }
    
    if (queryForm.value.module) {
      params.module = queryForm.value.module;
    }
    
    // 新增：操作结果查询
    if (queryForm.value.result) {
      params.result = queryForm.value.result;
    }
    
    // 新增：IP地址查询
    if (queryForm.value.ipAddress?.trim()) {
      params.ipAddress = queryForm.value.ipAddress.trim();
    }
    
    // 时间范围处理
    if (queryForm.value.timeRange && queryForm.value.timeRange.length === 2) {
      params.startTime = queryForm.value.timeRange[0];
      params.endTime = queryForm.value.timeRange[1];
    }
    
    console.log('查询表单数据:', queryForm.value);
    console.log('发送查询请求参数:', params);
    console.log('请求URL:', '/api/operationlog/list');
    
    // 添加请求头调试信息
    const config = {
      params,
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${localStorage.getItem('token') || sessionStorage.getItem('token')}`
      }
    };
    
    console.log('请求配置:', config);
    
    const response = await api.get('/api/operationlog/list', config);
    console.log('API响应:', response);
    
    if (response.data.success) {
      const data = response.data.data;
      console.log('日志数据:', data);
      
      // 处理返回的数据，确保属性名称兼容
      logs.value = (data.items || []).map(log => ({
        id: log.id || log.Id,
        operatorName: log.operatorName || log.OperatorName,
        operationType: log.operationType || log.OperationType,
        module: log.module || log.Module,
        description: log.description || log.Description,
        operationTime: log.operationTime || log.OperationTime,
        result: log.result || log.Result,
        ipAddress: log.ipAddress || log.IpAddress,
        userAgent: log.userAgent || log.UserAgent,
        requestData: log.requestData || log.RequestData,
        responseData: log.responseData || log.ResponseData,
        executionTime: log.executionTime || log.ExecutionTime
      }));
      
      pagination.value.total = data.totalCount || 0;
      
      ElMessage.success(`查询成功，共找到 ${pagination.value.total} 条记录`);
    } else {
      console.error('API返回错误:', response.data);
      ElMessage.error(response.data.message || '获取日志列表失败');
    }
  } catch (error) {
    console.error('获取日志列表失败:', error);
    console.error('错误详情:', {
      message: error.message,
      response: error.response?.data,
      status: error.response?.status,
      config: error.config,
      url: error.config?.url,
      method: error.config?.method,
      params: error.config?.params
    });
    
    if (error.response?.status === 401) {
      ElMessage.error('认证失败，请重新登录');
    } else if (error.response?.status === 403) {
      ElMessage.error('权限不足，无法访问日志数据');
    } else if (error.response?.status === 404) {
      ElMessage.error('日志API接口不存在');
    } else if (error.response?.status >= 500) {
      ElMessage.error('服务器错误，请稍后重试');
    } else {
      ElMessage.error(`获取日志列表失败: ${error.message}`);
    }
  } finally {
    loading.value = false;
  }
};

// 获取统计信息
const fetchStatistics = async () => {
  try {
    const response = await api.get('/api/operationlog/statistics');
    if (response.data.success) {
      const data = response.data.data;
      statistics.value = {
        totalLogs: data.totalLogs || 0,
        todayLogs: data.todayLogs || 0,
        errorLogs: data.errorLogs || 0,
        activeUsers: data.activeUsers || 0
      };
    }
  } catch (error) {
    console.error('获取统计信息失败:', error);
    // 如果获取统计信息失败，使用默认值
    statistics.value = {
      totalLogs: 0,
      todayLogs: 0,
      errorLogs: 0,
      activeUsers: 0
    };
  }
};

// 导航方法
const goToRoleManagement = () => {
  router.push('/RoleManagement');
};

const goToMenuManagement = () => {
  router.push('/MenuManagement');
};

const goToPermissionControl = () => {
  router.push('/PermissionControl');
};

const goToSystemSetting = () => {
  router.push('/system');
};

const goToLogManagement = () => {
  router.push('/LogManagement');
};

const goToFileManagement = () => {
  router.push('/FileManagement');
};

const goToArticleManagement = () => {
  router.push('/ArticleManagement');
};

const goToUserInfoManagement = () => {
  router.push('/UserInfoManagement');
};

// 查询方法
const searchLogs = () => {
  console.log('开始查询日志，查询条件:', queryForm.value);
  pagination.value.currentPage = 1;
  fetchLogs(false);
};

const resetQueryForm = () => {
  console.log('重置查询表单');
  queryForm.value = {
    operatorName: '',
    operationType: '',
    module: '',
    timeRange: [],
    result: '',
    ipAddress: ''
  };
  pagination.value.currentPage = 1;
  fetchLogs(false);
};

// 快速查询方法
const quickQueryToday = () => {
  console.log('快速查询今日日志');
  const today = new Date();
  const startOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate());
  const endOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59);
  
  queryForm.value.timeRange = [
    startOfDay.toISOString().slice(0, 19).replace('T', ' '),
    endOfDay.toISOString().slice(0, 19).replace('T', ' ')
  ];
  queryForm.value.operatorName = '';
  queryForm.value.operationType = '';
  queryForm.value.module = '';
  queryForm.value.result = '';
  queryForm.value.ipAddress = '';
  
  pagination.value.currentPage = 1;
  fetchLogs(false);
  ElMessage.info('已查询今日日志');
};

const quickQueryWeek = () => {
  console.log('快速查询本周日志');
  const today = new Date();
  const startOfWeek = new Date(today);
  startOfWeek.setDate(today.getDate() - today.getDay());
  startOfWeek.setHours(0, 0, 0, 0);
  const endOfWeek = new Date(today);
  endOfWeek.setDate(today.getDate() + (6 - today.getDay()));
  endOfWeek.setHours(23, 59, 59, 999);
  
  queryForm.value.timeRange = [
    startOfWeek.toISOString().slice(0, 19).replace('T', ' '),
    endOfWeek.toISOString().slice(0, 19).replace('T', ' ')
  ];
  queryForm.value.operatorName = '';
  queryForm.value.operationType = '';
  queryForm.value.module = '';
  queryForm.value.result = '';
  queryForm.value.ipAddress = '';
  
  pagination.value.currentPage = 1;
  fetchLogs(false);
  ElMessage.info('已查询本周日志');
};

const quickQueryMonth = () => {
  console.log('快速查询本月日志');
  const today = new Date();
  const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
  const endOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0, 23, 59, 59);
  
  queryForm.value.timeRange = [
    startOfMonth.toISOString().slice(0, 19).replace('T', ' '),
    endOfMonth.toISOString().slice(0, 19).replace('T', ' ')
  ];
  queryForm.value.operatorName = '';
  queryForm.value.operationType = '';
  queryForm.value.module = '';
  queryForm.value.result = '';
  queryForm.value.ipAddress = '';
  
  pagination.value.currentPage = 1;
  fetchLogs(false);
  ElMessage.info('已查询本月日志');
};

const quickQueryErrors = () => {
  console.log('快速查询错误日志');
  queryForm.value.result = 'FAILURE';
  queryForm.value.operatorName = '';
  queryForm.value.operationType = '';
  queryForm.value.module = '';
  queryForm.value.timeRange = [];
  queryForm.value.ipAddress = '';
  
  pagination.value.currentPage = 1;
  fetchLogs(false);
  ElMessage.info('已查询错误日志');
};

const quickQueryLogins = () => {
  console.log('快速查询登录日志');
  queryForm.value.operationType = 'LOGIN';
  queryForm.value.operatorName = '';
  queryForm.value.module = '';
  queryForm.value.result = '';
  queryForm.value.timeRange = [];
  queryForm.value.ipAddress = '';
  
  pagination.value.currentPage = 1;
  fetchLogs(false);
  ElMessage.info('已查询登录日志');
};

// 导出日志
const exportLogs = async () => {
  try {
    ElMessageBox.confirm('确定要导出当前查询结果的日志吗？', '导出确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info'
    }).then(async () => {
      loading.value = true;
      
      // 构建导出参数
      const exportParams = {
        operatorName: queryForm.value.operatorName,
        operationType: queryForm.value.operationType,
        module: queryForm.value.module,
        result: queryForm.value.result,
        ipAddress: queryForm.value.ipAddress,
        startTime: queryForm.value.timeRange?.[0],
        endTime: queryForm.value.timeRange?.[1],
        format: 'excel'
      };
      
      const response = await api.post('/api/operationlog/export', exportParams, {
        responseType: 'blob'
      });
      
      // 创建下载链接
      const blob = new Blob([response.data], { 
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
      });
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = `操作日志_${new Date().toISOString().split('T')[0]}.xlsx`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
      
      ElMessage.success('日志导出成功');
    }).catch(() => {
      ElMessage.info('已取消导出');
    });
  } catch (error) {
    console.error('导出日志失败:', error);
    ElMessage.error('导出日志失败');
  } finally {
    loading.value = false;
  }
};

// 清理过期日志
const cleanupLogs = async () => {
  try {
    // 显示清理选项对话框
    const { value: cleanupOptions } = await ElMessageBox.prompt(
      '请输入清理选项：\n1. 清理天数（默认30天）\n2. 清理原因（可选）',
      '清理过期日志',
      {
        confirmButtonText: '确定清理',
        cancelButtonText: '取消',
        inputType: 'text',
        inputValue: '30',
        inputPlaceholder: '请输入清理天数，如：30',
        inputValidator: (value) => {
          const days = parseInt(value);
          if (isNaN(days) || days < 7) {
            return '清理天数不能少于7天';
          }
          if (days > 365) {
            return '清理天数不能超过365天';
          }
          return true;
        }
      }
    );

    if (!cleanupOptions) return;

    const days = parseInt(cleanupOptions);
    const beforeDate = new Date();
    beforeDate.setDate(beforeDate.getDate() - days);

    // 确认清理操作
    await ElMessageBox.confirm(
      `确定要清理${days}天前（${beforeDate.toLocaleDateString()}之前）的过期日志吗？\n此操作不可恢复！`,
      '最终确认',
      {
        confirmButtonText: '确定清理',
        cancelButtonText: '取消',
        type: 'warning'
      }
    );

    loading.value = true;
    
    const requestData = {
      beforeDate: beforeDate.toISOString(),
      reason: `系统管理员清理${days}天前的过期日志`,
      forceCleanup: false
    };
    
    console.log('发送清理请求:', requestData);
    const response = await api.post('/api/operationlog/cleanup', requestData);
    
    if (response.data.success) {
      const stats = response.data.data;
      ElMessage.success(`清理成功！共清理 ${stats.cleanedCount} 条日志，释放约 ${(stats.freedSpaceBytes / 1024).toFixed(2)} KB 存储空间`);
      
      // 重新获取数据
      await fetchLogs(false);
      await fetchStatistics();
    } else {
      ElMessage.error(response.data.message || '清理过期日志失败');
    }
  } catch (error) {
    if (error === 'cancel') {
      ElMessage.info('已取消清理操作');
    } else {
      console.error('清理过期日志失败:', error);
      if (error.response?.status === 400) {
        ElMessage.error(error.response.data.message || '清理参数错误');
      } else {
        ElMessage.error('清理过期日志失败，请稍后重试');
      }
    }
  } finally {
    loading.value = false;
  }
};

// 查看日志详情
const viewLogDetail = (log) => {
  selectedLog.value = log;
  detailDialogVisible.value = true;
};

// 分页处理
const handleSizeChange = (size) => {
  pagination.value.pageSize = size;
  pagination.value.currentPage = 1;
  fetchLogs(false);
};

const handleCurrentChange = (page) => {
  pagination.value.currentPage = page;
  fetchLogs(false);
};

// 格式化方法
const formatDateTime = (dateTime) => {
  if (!dateTime) return '';
  return new Date(dateTime).toLocaleString('zh-CN');
};

const formatJson = (jsonString) => {
  if (!jsonString) return '';
  try {
    return JSON.stringify(JSON.parse(jsonString), null, 2);
  } catch {
    return jsonString;
  }
};

const getOperationTypeColor = (type) => {
  const colorMap = {
    'LOGIN': 'success',
    'LOGOUT': 'info',
    'CREATE': 'primary',
    'UPDATE': 'warning',
    'DELETE': 'danger',
    'QUERY': 'info'
  };
  return colorMap[type] || 'info';
};

const getOperationTypeLabel = (type) => {
  const labelMap = {
    'LOGIN': '登录',
    'LOGOUT': '登出',
    'CREATE': '创建',
    'UPDATE': '更新',
    'DELETE': '删除',
    'QUERY': '查询'
  };
  return labelMap[type] || type;
};

const getModuleLabel = (module) => {
  const labelMap = {
    'USER': '用户管理',
    'ROLE': '角色管理',
    'MENU': '菜单管理',
    'PERMISSION': '权限管理',
    'SYSTEM': '系统设置',
    'FILE': '文件管理'
  };
  return labelMap[module] || module;
};

// 组件挂载时加载数据
onMounted(() => {
  fetchLogs();
  fetchStatistics();
});
</script>

<style scoped>
.query-card {
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(80, 120, 200, 0.08);
}

.statistics-row {
  margin-bottom: 20px;
}

.statistics-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(80, 120, 200, 0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}

.statistics-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(80, 120, 200, 0.12);
}

.statistics-item {
  text-align: center;
  padding: 20px 0;
}

.statistics-number {
  font-size: 28px;
  font-weight: bold;
  color: #4f46e5;
  margin-bottom: 8px;
}

.statistics-label {
  font-size: 14px;
  color: #666;
}

.log-table-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(80, 120, 200, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header span {
  font-size: 18px;
  font-weight: bold;
  color: #4f46e5;
}

.el-table {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(80, 120, 200, 0.08);
  background: #fff;
}

.el-table th {
  background: #e0e7ff !important;
  color: #4f46e5;
  font-weight: 600;
  font-size: 15px;
}

.el-table tr {
  transition: background 0.2s;
}

.el-table tr:hover > td {
  background: #f1f5ff !important;
}

.el-table .el-button[type="text"] {
  color: #6366f1;
  font-weight: 500;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.el-table .el-button[type="text"]:hover {
  background: #e0e7ff;
  color: #3b3b3b;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding: 20px 0;
}

.el-descriptions {
  margin: 20px 0;
}

.el-descriptions pre {
  background: #f5f7fa;
  padding: 12px;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.4;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* 快速查询按钮样式 */
.quick-query-buttons {
  margin-top: 15px;
  padding: 15px 0;
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.quick-query-buttons .el-button {
  border-radius: 20px;
  font-size: 12px;
  padding: 6px 12px;
  transition: all 0.2s;
}

.quick-query-buttons .el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 查询表单优化 */
.query-card .el-form {
  margin-bottom: 0;
}

.query-card .el-form-item {
  margin-bottom: 15px;
}

.query-card .el-form-item__label {
  font-weight: 500;
  color: #374151;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .quick-query-buttons {
    justify-content: center;
  }
  
  .quick-query-buttons .el-button {
    margin-bottom: 5px;
  }
}

.el-form-item {
  margin-bottom: 16px;
}

.el-button {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s;
}

.el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.el-card {
  border: none;
  transition: all 0.3s;
}

.el-card:hover {
  box-shadow: 0 4px 20px rgba(80, 120, 200, 0.12);
}

.el-tag {
  border-radius: 6px;
  font-weight: 500;
}

.el-select {
  width: 180px;
}

.el-date-picker {
  width: 320px;
}

.el-input {
  width: 180px;
}
</style>
